<template>
  <div class="home-recommend">
    <!-- 广告推荐 -->
    <!-- {{items}} 判断items中是否有从父组件中传过来的数据 -->
    <img
      :src="banner.picUrl"
      alt=""
      width="33.3%"
      height="100px"
      v-for="banner in banners"
      :key="banner.id"
    />
    <!-- 标题 -->
    <h3 class="title">Hot 优惠热卖</h3>
    <!-- 热门商品 -->
    <div class="items">
      <!-- 遍历分类中的商品 -->
      <div class="item" v-for="(item,index) in items" :key="index"
      @click="clickItem(item.id)"
      >
        <div class="item-left">
          <img v-lazy="item.pic" alt="" />
        </div>
        <div class="item-right" style="background:block">
          <h4 class="name">商品名称：{{ item.name }}</h4>
          <p class="desc">
            {{ item.characteristic ? item.characteristic : "暂无描述" }}
          </p>
          <div class="action">
            <span class="price"> ￥：{{ item.minPrice }} </span>
            <van-icon
              color="#f66"
              size="24"
              name="add-o"
              @click.stop="addCart(item)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchHomeBanner } from '@api'
export default {
  // 父向子通信,子组件需要的数据从父组件中拿
  props: {
    // 定义一个items，类型为数组，且必须定义
    items: {
      // 数组类型
      type: Array,
      // 必须传入
      required: true
    }
  },
  data () {
    return {
      banners: []
    }
  },
  created () {
    // 请求banner和分类接口中的数据
    this.fetchBanners()
  },
  methods: {
    clickItem (id) {
      this.$emit('clickItem', id)
    },
    addCart (item) {
      console.log(1)
      // 将逻辑在父组件中处理 处理加入购物车数据 增加购买数量 和 选中状态
      item = {
        ...item,
        num: 1,
        checked: true
      }
      this.$emit('addCart', item)
    },
    fetchBanners () {
      // 请求banner
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  line-height: 40px;
  background-color: #f2f2f2;
  font-size: 20px;
  font-weight: 100;
  padding-left: 10px;
  color: #aa9079;
  font-weight: bold;
  text-align: center;
}
.item {
  border-radius: 100px;
  border: 1px pink solid;
  background: pink;
  margin-top: 30px;
  height: 180px;
  display: flex;
  align-items: center;
  &-left {
    height: 180px;
    img {
      width: 180px;
      height: 180px;
    }
  }
  &-right {
    flex: 1;
    height: 180px;
    padding: 0 10px;
    box-sizing: border-box;
    .name {
      font-weight: 100;
      font-size: 16px;
      line-height: 40px;
      color: #333;
    }
    .desc {
      line-height: 36px;
      font-size: 14px;
      color: #666;
    }
    .action {
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      box-sizing: border-box;
      align-items: center;
      .price {
        color: #ff2222;
      }
    }
  }
}

</style>
